<template>
	<view class="list">
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="top">
				<view><image :src="item.displayImg" mode="aspectFit"></image></view>
				<view>
					<view class="title">{{ item.shopName }}</view>
					<text>共{{ item.productCountNum || 0 }}件商品 粉丝{{ item.fensNum || 0 }}</text>
				</view>
				<view class="btns"><text class="btn" @tap="enter(item.shopId)">进店</text></view>
			</view>
			<view class="flex flex-wrap">
				<view class="basis-l bgimg flex align-end">
					<image :src="i.originalimg" v-for="(i, j) in item.shopProducts" :key="j" @tap="proUrl(i.productid)" v-if="j == 0" mode="widthFix"></image>
				</view>
				<view class="basis-s smimg">
					<image :src="i.originalimg" v-for="(i, j) in item.shopProducts" :key="j" @tap="proUrl(i.productid)" v-if="j > 0" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import ajax from '@/common/request.js';
var _self;
export default {
	data() {
		return {
			list: []
		};
	},
	created() {
		_self = this;
		//console.log('asdf')
		_self.getListDataFromNet();
		
	},
	methods: {
		/* 获取查询数据 */
		getListDataFromNet() {
			ajax({
				url: '/store/searchLvStore',
				data: {
					thePage: 1,
					showNumber: 20,
					obj: {
						mid: '',
						shopName: '',
						companyProvince: '',
						companyCity: '',
						companyArea: '',
						marchantType: ''
					}
				},
				success(d) {
					_self.list = d.objs || [];
				}
			});
		},
		proUrl(proid) {
			uni.navigateTo({
				url: `../aduit/product?proId=${proid}`
			});
		},
		enter(id) {
			uni.navigateTo({
				url: '../aduit/shopIndex?shopId=' + id
			});
		}
	}
};
</script>

<style lang="scss">
.Info-item {
	view {
		margin-top: 20rpx;
	}
}

.list {
	padding: 0 17rpx;
	padding-top: 30rpx;

	.item {
		margin-bottom: 23rpx;
		width: 100%;
		background: #fff;
		border-radius: $page-row-spacing;
		box-shadow: 0 0 $page-row-spacing 0 rgba(9, 2, 4, 0.06);
		padding: $page-row-spacing;
	}

	.top {
		font-size: 24rpx;
		margin-bottom: 10rpx;
		color: $font-color-dark;

		> view {
			vertical-align: middle;
			display: inline-block;
			margin-right: 10rpx;
		}

		image {
			width: 66rpx;
			height: 66rpx;
		}

		.title {
			font-size: 28rpx;
			color: $font-color-light;
			width: 280rpx;
		}

		.btns {
			float: right;
		}

		.btn {
			color: #ffffff;
			width: 129rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: #d03032;
			border-radius: 50rpx;
			margin-left: 10rpx;
			display: inline-block;

			&.active {
				color: #fff;
				background: #fca434;
			}
		}
	}

	.bgimg {
		image {
			width: 99%;
		}
	}

	.smimg {
		image {
			width: 100%;
		}
	}
}
</style>
